<template>
    <div>
        <div style="height: 50px;">
            <div @click="back" style="float: left; margin-top: 5px; margin-left: 15px;">
                <img src="../../assets/themes/images/exit.png" height="30" width="30" />
            </div>
            <router-link to="/register/">
                <p style="margin-right: 3%; padding-top: 4px; font-size: 20px; float: right;">注册</p>
            </router-link>
        </div>
        
        <div style="margin-top: 30px; text-align: center;">
            <img src="../../assets/themes/images/test/test1.jpg" height="80" width="80" style="border-radius:100%;"/>
        </div>
        
        <div style="margin-top: 30px; width: 90%; margin-left: 5%;">
            <van-field
            v-model="username"
            placeholder="邮箱或者手机号"
            clearable
            :error-message="usernamemsg"
            @input="check_username"
            />
            
            <br/>
            <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
            clearable
            :error-message="psmsg"
            />
            <br/>
            <div class="btn login_btn" @click="login"><label style="margin-top: 8px; color: white;">登 录</label></div>
            
            
            <p style="margin-top: 10px; float: left; margin-left: 3%; color: #0088CC; font-size: 15px;" @click="showPopup">登录遇到问题!</p>
            <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" round >
                <div style="margin-top: 5px; width:90%; margin-left: 5%;">
                    <h4>：）咋地了小宝贝???</h4>
                </div>
            </van-popup>
            <router-link to="/phone_login/" style="margin-top: 10px; float: right; margin-right: 3%; color: #0088CC; font-size: 15px;">短信验证登录</router-link>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'

// vant中的输入框
import Field from 'vant';
import 'vant/lib/field/style';
Vue.use(Field)

// vant中的弹出框
import { Popup } from 'vant';
import 'vant/lib/popup/style';
Vue.use(Popup)
// 使vant适应pc端
import '@vant/touch-emulator'

export default {
    data() {
        return {
            username:'',
            password:'',
            show: false,
            usernamemsg:'',
            psmsg:'',
        };
    },
    mounted: function(){
        this.$axios.get('user_abt/get_public/')
                .then(res=>{
                    this.public_key = res.data
                    // console.log(res.data.length)
                })
    },
    methods:{
        login(){
            if (this.usernamemsg!='' || this.password==='' || this.username===''){
                alert("信息输入不完整或有误")
            }
            else{
                this.$axios.post('user_abt/login/',{
                    data:{
                        usename:this.$jsEncrypt(this.username,this.public_key),
                        password:this.$jsEncrypt(this.password,this.public_key),
                    }
                }).then(res=>{
                    // console.log(res.data)
                    if (res.data['status'] === 0){
                        // console.log(res.data)
                        localStorage.setItem('userstatus', JSON.stringify(res.data['data']['userstatus']))
                        localStorage.setItem('sessionid', JSON.stringify(res.data['data']['sessionid']))
                        this.$router.push({path:'/find/'})
                    }
                    else{
                        alert(res.data['message'])
                    }
                })
            }
            
            // console.log(this.username, this.password)
        },
        back(){
            this.$router.push({path:'/find/'})
        },
        showPopup() {
            this.show = true;
        },
        check_username(){
            if (this.username === '') {
                this.usernamemsg = ''
            }
            else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username) & !/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(this.username)) {
                this.usernamemsg = '请输入正确的手机号码或邮箱'
            }
            else {
                this.usernamemsg = ''
            }
        },
    },
}
</script>

<style scoped>
.login_btn{
    width: 96%; 
    margin-left: 2%; 
    height: 50px; 
    border-radius: 20px;
    text-align: center;
    background-color: #FF5151;
}
</style>